import React, { Component, lazy, Suspense } from 'react';
// import Home from './Index/Home';
// import eventBus from '../utils/eventBus';
import context from '../utils/context';
import { Route, Switch, Redirect } from 'react-router-dom'
import Loading from './Loading';
import '../styles/Index.scss'
import Tabbar from '../components/Tabbar';
// import eventBus from '../utils/eventBus';
var Home = lazy(() => import('./Index/Home'))
var Kind = lazy(() => import('./Index/Kind'))
var Cart = lazy(() => import('./Index/Cart'))
var Mine = lazy(() => import('./Index/Mine'))
var NotFound = lazy(() => import('./NotFound'))
class Index extends Component<any, any> {
    constructor(props: any) {
        super(props);

        // this.state = {
        //     city:null,
           
        // }

    }
    // componentDidMount() {
    //     eventBus.on('city', async (city) => {
    //         console.log(city);
    //        await this.setState({
    //             city
    //         },()=>{
    //             console.log(this.state.city)
    //         })
            
    //     })
    // }
    render() {
        // console.log(this.state.city);
        return (
            <div className='index'>
                <Suspense fallback={<Loading />}>
                    <Switch>
                        <Route path="/index/home">
                            <context.Provider value={1}>
                                <Home />
                            </context.Provider>
                        </Route>
                        <Route path="/index/kind" component={Kind} />
                        <Route path="/index/cart" component={Cart} />
                        <Route path="/index/mine" component={Mine} />
                        <Redirect exact from="/index" to="/index/home" />
                        <Route path="*" component={NotFound} />
                    </Switch>
                </Suspense>
                <Tabbar />
            </div>
        );
    }
}

export default Index;